<template>
	<view>
		<!--演示一个渐变背景，请根据项目实际需求自行改进  -->
		<graceHeader background="linear-gradient(to right, #B100FF 0%,#00B3FF 80%)">
			<view class="grace-header-body">
				<!-- 返回按钮 -->
				<view class="icons grace-icons icon-arrow-left grace-white" @tap="goback"></view>
				<!-- 中间内容 -->
				<view class="grace-search">
					<view class="grace-search-in">
						<view class="icons grace-icons icon-search"></view>
						<view class="input"><input type="search" placeholder="关键字" /></view>
					</view>
				</view>
				<!-- 菜单按钮 -->

			</view>
		</graceHeader>
		<!-- 内容开始区域  -->
		<view class="grace-body">
			<view class="grace-news-list">
				<view class="item">
					<view class="body">
						<view class="title">标题信息</view>
						<view class="desc">描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</view>
					</view>
					<view class="img img-r">
						<image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/4.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="desc">
					<text class="grace-icons icon-eye"></text> 9999
					<text class="grace-icons icon-write" style="margin-left:10px;"></text> graceui
					<text style="float:right;">99</text>
					<text class="grace-icons icon-zan" style="float:right; margin-right:6px;"></text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import graceHeader from '../../graceUI/components/graceHeader.vue';
	import gracePopupMenu from '../../graceUI/components/gracePopupMenu.vue';
	export default {
		data() {
			return {
				menu1Show: false,
				menu1Top: 0,
			};
		},
		methods: {
			showMenu1: function(e) {
				if (this.menu1Show) {
					this.menu1Show = false;
					return;
				}
				this.menu1Show = true;
				this.menu1Top = 44;
			},
			// 关闭菜单方法

			goback: function() {
				uni.showToast({
					title: "您点击了返回按钮",
					icon: "none"
				});
				uni.navigateBack({});
			}
		},
		components: {
			gracePopupMenu,
			graceHeader
		}
	}
</script>
<style>
	/* 页面个性化样式 */
	.menus {
		line-height: 100rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #E8E8E8;
		margin-left: 30rpx;
		text-align: left;
	}
</style>
